<template>
  <div class="emotion">
    <div class="emotion-header">
      <input
        ref="inputRef"
        v-model="keyword"
        type="text"
        placeholder="还不赶紧来斗一波图"
        @keydown.enter="search"
        @input="input"
      />
      <a-button
        type="ghost"
        v-throttle="{ type: 'click', wait: 3000, func: search }"
      >
        <template #icon><SearchOutlined /></template>
        搜索
      </a-button>
    </div>
    <el-scrollbar>
      <div class="emotion-content">
        <!-- 不存在的时候出现这个 -->
        <emoticon v-if="!emoticonList.length" />
        <!-- 搜索的时候就出现这个 -->
        <div v-else class="emotion-content-emoji">
          <div v-for="(url, index) in emoticonList" :key="index" class="resulu">
            <el-image
              class="search-img"
              :src="`http://image.dbbqb.com/${url.path}`"
              fit="fill"
              lazy
              @click="sendEmoji(url.path)"
            />
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script lang="ts">
import { useRequest } from 'vue-request';
import { SearchOutlined } from '@ant-design/icons-vue';
import { defineComponent, Ref, ref } from 'vue';
import Emoticon from './emoticon.vue';
import { ElScrollbar } from 'element-plus';
import { chatService } from '@/api/chat';
import { message } from 'ant-design-vue';
import { inject } from 'vue';

interface emoticonList {
  path?: string;
}
export default defineComponent({
  name: 'ToolEmoticon',
  components: {
    SearchOutlined,
    Emoticon,
    [ElScrollbar.name]: ElScrollbar,
  },
  setup(props, { emit }) {
    const keyword = ref('');
    const emoticonList: Ref<emoticonList[]> = ref([]);
    const inputRef = ref();

    const sendChatImg: any = inject('sendChatImg');
    const hadePopover: any = inject('hadePopover');

    const search = async () => {
      if (!keyword.value) {
        message.warn('亲,你没输入有效信息喔');
        return;
      }

      await run({ keyword: keyword.value });
      // console.log(data.value?.data);

      emoticonList.value = data.value?.data;
    };
    const { run, data, loading, error } = useRequest(chatService.Search, {
      manual: true,
    });

    const input = () => {
      if (!inputRef.value) {
        emoticonList.value = [];
      }
    };

    const sendEmoji = (url: any) => {
      sendChatImg(url);
      hadePopover();
    };

    return { keyword, search, emoticonList, input, sendEmoji };
  },
});
</script>

<style scoped lang="scss">
.emotion {
  padding: 0 10px;
  .emotion-header {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e5e5e5;
    transition: all 0.3s;
    font-size: 13px;
    color: #999;
    border-radius: 5px;
    margin: 7px 0;
    input {
      padding: 8px 16px;
      flex: 1;
      font-size: 13px;
      outline: none;
      border: none;
      color: #999;
      background: transparent;
      input::placeholder {
        color: #ccc;
        font-size: 14px;
      }
    }
  }

  .emotion-content {
    width: 400px;
    height: 275px;

    .emotion-content-emoji {
      display: flex;
      flex-wrap: wrap;
      .search-img {
        width: 82px;
        height: 82px;
        margin: 6px;
        border-radius: 8px;
        border: 1px solid #eee;
        padding: 0;
        cursor: pointer;

        -webkit-user-drag: none;
        transition: all 0.3s;
        &:hover {
          transform: scale(1.3);
        }
      }
    }
  }
}
</style>
